/*
 * @Descripttion: 懒加载
 * @version:
 * @Author: lhl
 * @Date: 2024-11-18 11:49:06
 * @LastEditors: lhl
 * @LastEditTime: 2024-11-18 21:23:27
 */
import { Suspense, LazyExoticComponent } from 'react';
import { Spin } from 'antd';
/**
 * 组件懒加载，结合Suspense实现
 * @param Component 组件对象
 * @returns 返回新组件
 */

// 方案1：使用 React.ComponentType
export const lazyLoad = (Component: LazyExoticComponent<React.ComponentType>) => {
  return (
    <Suspense
      fallback={
        <Spin
          size="large"
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
        />
      }
    >
      <Component />
    </Suspense>
  );
};

// 方案2：更明确的函数组件类型
// export const lazyLoad = (Component: React.LazyExoticComponent<() => JSX.Element>): React.ReactNode => {
//   return (
//     <Suspense
//       fallback={
//         <Spin
//           size="large"
//           style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
//         />
//       }
//     >
//       <Component />
//     </Suspense>
//   );
// };
